<!--
 *  ┌─────────────────────────────────────────────────────────────┐
 *  │┌───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┐│
 *  ││Esc│!1 │@2 │#3 │$4 │%5 │^6 │&7 │*8 │(9 │)0 │_- │+= │|\ │`~ ││
 *  │├───┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴───┤│
 *  ││ Tab │ Q │ W │ E │ R │ T │ Y │ U │ I │ O │ P │{[ │}] │ BS  ││
 *  │├─────┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴─────┤│
 *  ││ Ctrl │ A │ S │ D │ F │ G │ H │ J │ K │ L │: ;│" '│ Enter  ││
 *  │├──────┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴────┬───┤│
 *  ││ Shift  │ Z │ X │ C │ V │ B │ N │ M │< ,│> .│? /│Shift │Fn ││
 *  │└─────┬──┴┬──┴──┬┴───┴───┴───┴───┴───┴──┬┴───┴┬──┴┬─────┴───┘│
 *  │      │Fn │ Alt │         Space         │ Alt │Win│   HHKB   │
 *  │      └───┴─────┴───────────────────────┴─────┴───┘          │
 *  └─────────────────────────────────────────────────────────────┘
 *
 * @descriptionripttion:
 * @version:
 * @Date: 2022-03-16 10:31:23
 * @LastEditors: huzhushan@126.com
 * @LastEditTime: 2022-07-24 14:05:22
 * @Author: huzhushan@126.com
 * @HomePage: https://huzhushan.gitee.io/vue3-element-admin
 * @Github: https://github.com/huzhushan/vue3-element-admin
 * @Donate: https://huzhushan.gitee.io/vue3-element-admin/donate/
 -->
<template>
  <drawer-frame
    :title="`${page.app_id ? '编辑' : '新建'}页面`"
    @close="$emit('close')"
    @submit="handleSubmit"
  >
    <el-form ref="form" :model="model" :rules="rules" class="wrapper">
      <div class="left">
        <el-form-item label="应用" prop="app_id">
          <el-select
            v-model="model.app_id"
            style="width: 100%"
            placeholder="应用"
          ></el-select>
        </el-form-item>
        <el-form-item label="标题" prop="title">
          <el-input v-model="model.title" placeholder="标题"></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input
            v-model="model.desc"
            type="textarea"
            placeholder="描述"
          ></el-input>
        </el-form-item>
        <el-form-item label="封面图">
          <el-input
            v-model="model.pic_url"
            placeholder="请选择一张图片作为封面图"
          >
            <el-button
              slot="append"
              icon="el-icon-folder-opened"
              @click="showDrawer = true"
            ></el-button>
          </el-input>
        </el-form-item>
      </div>
      <div class="right">
        <el-form-item label="内容" label-width="0" prop="body">
          <tinymce v-model="model.body" :height="560" />
        </el-form-item>
      </div>
    </el-form>
    <el-drawer
      :wrapper-closable="false"
      :show-close="false"
      :with-header="false"
      :append-to-body="true"
      :visible.sync="showDrawer"
      direction="rtl"
      size="1200px"
    >
      <media-select
        @close="showDrawer = false"
        @select="handleSelectcover"
      ></media-select>
    </el-drawer>
  </drawer-frame>
</template>
<script>
import { AddItem, UpdateItem } from '@/api/h5'
import Tinymce from '@/components/Tinymce'
import MediaSelect from './MediaSelect'
export default {
  components: { Tinymce, MediaSelect },
  props: {
    page: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      showDrawer: false,
      model: {
        app_id: '',
        title: '',
        description: '',
        pic_url: '',
        body: '',
      },
      rules: {
        app_id: [
          {
            required: true,
            message: '请选择应用',
            trigger: 'change',
          },
        ],
        title: [
          {
            required: true,
            message: '请输入标题',
            trigger: 'blur',
          },
        ],
        body: [
          {
            required: true,
            message: '请输入内容',
            trigger: 'change',
          },
        ],
      },
    }
  },
  computed: {
    body() {
      return this.model.body
    },
  },
  watch: {
    body() {
      this.$refs.form.validateField('body')
    },
  },
  created() {
    if (this.page.app_id) {
      this.model = this.page
    }
  },
  methods: {
    handleSelectcover(val) {
      this.model.pic_url = val
    },
    handleSubmit() {
      this.$refs.form.validate(async valid => {
        if (valid) {
          const { code, msg } = this.page.app_id
            ? await UpdateItem(this.model)
            : await AddItem(this.model)

          if (+code === 1) {
            this.$message.success(msg)
            this.$emit('save')
          } else {
            this.$message.error(msg)
          }
        }
      })
    },
  },
}
</script>
<style scoped lang="scss">
.wrapper {
  display: flex;
  .left {
    width: 320px;
  }
  .right {
    flex: 1;
    margin-left: 20px;
  }
}
</style>
